<template>
  <div class="">
    <van-datetime-picker
      v-model="currentDate"
      type="date"
      title="选择年月日"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="onConfirm"
      @cancel="onCancel"
    />
  </div>
</template>

<script>
import { editUser } from '@/api/user.js';
import dayjs from 'dayjs';

export default {
  name: 'update-birthday',
  props: {
    // 用户信息
    usrInfo: {
      required: true,
    },
  },
  data() {
    return {
      currentDate: null,
      minDate: new Date(1984, 0, 1),
      maxDate: new Date(2035, 10, 1),
    };
  },
  created() {
    this.currentDate = new Date(this.usrInfo.birthday);
  },
  methods: {
    onCancel() {
      // 通过父组件 关闭弹窗、修改生日
      this.$emit('closePop', this.usrInfo.birthday);
    },
    async onConfirm() {
      try {
        // 使用 dayjs 模块 格式化 日期
        let newDate = dayjs(this.currentDate).format('YYYY-MM-DD');
        // 提交到服务器接口
        await editUser({ birthday: newDate });
        // 提示成功
        this.$toast.success('修改成功 : )');
        // 通过父组件 关闭弹窗、修改生日
        this.$emit('closePop', newDate);
      } catch (err) {
        console.log(err);
        // 提示失败
        this.$toast.fail('修改失败 : (');
      }
    },
  },
  computed: {},
  watch: {},
  components: {},
};
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__text {
  color: #fff !important;
}
</style>
